<template>
  <div class="app-container">
    <!--    搜索-->
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="110px">
      <el-form-item label="活动发起类型" prop="startType">
        <el-select
          style="width: 200px"
          v-model="queryParams.startType"
          placeholder="请选择"
          clearable
          size="small"
        >
          <el-option
            v-for="dict in activitiesTypeOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="应用类型" prop="appType">
        <el-select
          style="width: 200px"
          v-model="queryParams.appType"
          placeholder="请选择"
          clearable
          size="small"
        >
          <el-option
            v-for="dict in appTypeOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="城市" prop="comId">
        <el-select
          style="width: 200px"
          v-model="queryParams.comId"
          placeholder="请选择"
          clearable
          size="small"
        >
          <el-option
            v-for="dict in citysOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['reviewActivities:activeContent:add']">新增</el-button>
      </el-form-item>
    </el-form>
    <!--列表-->
    <el-table
      v-loading="loading"
      @sort-change="changeTableSort"
      :default-sort="{ prop: 'createTime', order: 'descending' }"
      border
      :data="getActivitiesDetails"
      :row-class-name="getRowClass"
    >
      <el-table-column label="应用类型" prop="" :formatter="userFormat" align="center"></el-table-column>
      <el-table-column label="活动名称" prop="promotionName"  align="center"></el-table-column>
      <el-table-column label="城市" align="center" prop="city"></el-table-column>
      <el-table-column label="活动分享标题" align="center" prop="pageName"></el-table-column>
      <el-table-column label="活动有效期" align="center">
        <template slot-scope="scope">
          <span>{{scope.row.startTime ? parserDate(scope.row.startTime) : "--"}}至{{scope.row.endTime ? parserDate(scope.row.endTime) : "--"}}</span>
        </template>
      </el-table-column>
      <el-table-column label="核销周期" align="center">
        <template slot-scope="scope">
          <span>{{scope.row.writeOffStartTime ? parserDate(scope.row.writeOffStartTime): "--"}}至{{scope.row.writeOffEndTime ? parserDate(scope.row.writeOffEndTime) : "--"}}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" prop="createTime" sortable align="center">
        <template slot-scope="scope">
          <span>{{scope.row.createTime ? parserDate(scope.row.createTime) : "--"}}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        fixed="right"
        width="200"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['reviewActivities:activeContent:edit']"
            >修改</el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['reviewActivities:activeContent:remove']"
            >删除</el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-search"
            @click="handleCheck(scope.row)"
            v-hasPermi="['reviewActivities:activeContent:check']"
            >查看</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!--父级添加或者修改对话框-->
    <el-dialog
      :close-on-click-modal="false"
      :title="title"
      :visible.sync="openFather"
      width="1280px"
      append-to-body
    >
      <el-form
        ref="formFather"
        :model="formFather"
        :rules="rules"
        label-width="110px"
      >
      <!-- 第一行 -->
        <el-row>
          <!-- 应用类型 -->
           <el-col :span="8">
            <el-form-item label="应用类型" prop="appType">
              <el-select :disabled="preview"   style="width:188px" v-model="formFather.appType" placeholder="请选择" clearable size="small">
                <el-option
                  v-for="dict in appTypeOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 城市 -->
           <el-col :span="8">
            <el-form-item label="城市" prop="comId">
              <el-select :disabled="preview" style="width:188px" v-model="formFather.comId" placeholder="请选择" clearable size="small">
                <el-option
                  v-for="dict in citysOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 活动名称 -->
          <el-col :span="8">
           <el-form-item label="活动名称" prop="promotionName">
              <el-input
                :disabled="preview"
                style="width:188px"
                v-model="formFather.promotionName"
                placeholder="请输入活动名称"
              />
            </el-form-item>
          </el-col>
        </el-row>

      <!-- 第二行 -->
        <el-row>
        <!-- 活动开始时间 -->
          <el-col :span="8">
            <el-form-item label="活动开始时间" prop="startTime">
              <el-date-picker
               style="width:236px"
                v-model="formFather.startTime"
                type="datetime"
                placeholder="选择时间"
                :disabled="preview"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        <!-- 活动结束时间 -->
          <el-col :span="8">
            <el-form-item label="活动结束时间" prop="endTime">
              <el-date-picker
                style="width:236px"
                v-model="formFather.endTime"
                type="datetime"
                placeholder="选择时间"
                :disabled="preview"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

      <!-- 第三行 上传经纪人===活动配置图片-->
      <el-row v-if="formFather.appType=='jjr'">
        <el-row>
          <label style="color:#999;font-weight:normal;">经纪人</label>
        </el-row>
        
        <el-row>
          <!-- 经纪人---详情图片 -->
          <el-col   :span="8" v-for="(item,index) in jjrImagesType" :key="index">
          <el-form-item
            :label="item.dictLabel + (item.dictType=='jjr_image_type'?'（经纪人）':'（找房）')"
            label-width="150px"
          >
          <el-upload
                :class="{'mydisabled':item.fileList.length == 1}"
                v-model="item.url"
                action="https://api.shulanfd.com/aist-filesvr-web/api/files"
                list-type="picture-card"
                :file-list="item.fileList"
                :data="{
                  filetype: '活动图',
                  app: 'shulan',
                  module: '2',
                  sourceKey: '1'
                }"
               
                :on-preview="handlePictureCardPreview"
                :before-upload="beforeAvatarUpload"
                :on-remove=" handleRemove"
                :on-change="addchange(item.fileList)"
                :on-success="(res, file) => userClientUploadSuccess(index,res, file, 'jjr',item.remark,)"
              >
                <i :disabled="preview" class="el-icon-plus"> </i>
              </el-upload>        
          </el-form-item>
          </el-col>
        </el-row>
        </el-row>

           <!-- 第4.5行  上传电商===活动配置图片-->
        <el-row v-if="formFather.appType=='msh'">
        <el-row>
          <label style="color:#999;font-weight:normal;">电商</label>
        </el-row>
        <!-- 电商---详情图片 -->
        <el-row>
          <el-col  :span="6" v-for="(item,index) in mshImagesType" :key="index">
          <el-form-item
            :label="item.dictLabel"
           label-width="110px"
            :disabled="preview"
          >
          <el-upload
                :class="{'mydisabled':item.fileList.length == 1}"
                v-model="item.url"
                action="https://api.shulanfd.com/aist-filesvr-web/api/files"
                list-type="picture-card"
                :file-list="item.fileList"
                :data="{
                  filetype: '活动图',
                  app: 'shulan',
                  module: '2',
                  sourceKey: '1'
                }"
               
                :on-preview="handlePictureCardPreview"
                :before-upload="beforeAvatarUpload"
                :on-remove=" handleRemoveMsh"
                :on-change="addchange(item.fileList)"
                :on-success="(res, file) => userClientUploadSuccess(index,res, file, 'msh',item.remark,)"
              >
                <i  class="el-icon-plus"> </i>
              </el-upload>        
          </el-form-item>
          </el-col>
        </el-row>
        </el-row>
        <!-- 第五行 适用范围-->
        <el-row>
           <el-col :span="8">
              <el-form-item label="适用范围" prop="comCodeList">
              <el-checkbox-group
                v-model="formFather.comCodeList"
                :min="1"
                :max="2"
                :disabled="preview"
              >
                <el-checkbox
                  v-for="item in checkboxArr"
                  :label="item"
                  :key="item"
                  >{{ item }}</el-checkbox
                >
              </el-checkbox-group>
            </el-form-item>
           </el-col>
        </el-row>

        <!-- 第六行 核销时间-->
        <el-row>
          <el-col :span="8">
            <el-form-item label="核销开始时间" prop="writeOffStartTime">
              <el-date-picker
                style="width:236px"
                v-model="formFather.writeOffStartTime"
                :disabled="preview"
                type="datetime"
                placeholder="选择时间"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8" style="margin-left: 60px;">
            <el-form-item label="核销结束时间" prop="writeOffEndTime">
              <el-date-picker
                style="width:236px;"
                v-model="formFather.writeOffEndTime"
                :disabled="preview"
                type="datetime"
                placeholder="选择时间"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
       
       <!-- 第七行  分享活动标题-->
        <el-row>
          <el-col :span="8">
            <el-form-item label="活动分享标题" prop="pageName">
              <el-input
                v-model="formFather.pageName"
                :disabled="preview"
                placeholder="请输入活动分享标题"
                style="width:600px"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" style="display:flex; justify-content: center;">
        <el-button style="width:150px" @click="cancels"  :disabled="preview">取 消</el-button>
        <el-button style="width:150px;margin-left: 100px;" type="primary" @click="submitFormFather"  :disabled="preview">确 定</el-button>
       
      </div>
    </el-dialog>

    <el-dialog :visible.sync="dialogVisible" size="tiny">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="openDetail"
      width="800px"
      append-to-body
    >
      <el-table border :data="promotionSubList" style="width: 800px">
        <el-table-column label="图片" align="center" width="400">
          <template slot-scope="scopes">
            <el-popover placement="left" title="" trigger="hover">
              <el-image
                slot="reference"
                :src="scopes.row.imageUrl"
                :alt="scopes.row.imageUrl"
                style="max-height: 70px; max-width: 100px"
              ></el-image>
              <el-image
                :src="scopes.row.imageUrl"
                style="height: 500px; width: 500px"
              ></el-image>
            </el-popover>
          </template>
        </el-table-column>
         <el-table-column
          label="图文类型"
          align="center"
          class-name="small-padding fixed-width"
        >
       <template slot-scope="scopes">
         <div>{{scopes.row.locationType | payTypeFilter}}</div>
         </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scopes">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdates(scopes.row)"
              v-hasPermi="['reviewActivities:activeContent:edit']"
              >修改</el-button
            >
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDeletes(scopes.row)"
              v-hasPermi="['reviewActivities:activeContent:remove']"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close">关闭</el-button>
      </div>
    </el-dialog>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.page"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
let list = []
import Slshop from "@/components/Sl-shop";
import {
  listActivities,
  addActivities,
  deleteActivities,
  addItemActivities,
  deleteItemActivities,
  editUserActivities,
  deletetUserActivities,
} from "@/api/reviewActivities/activeContent";
import { log } from 'util';
  let typeobj= [
    {type:'dialog',name:'现金'},
    {type:'detail',name:'支付宝'},
    {type:'shareImg',name:'微信'},
    {type:'button',name:'银行卡'},
    {type:'grabNow',name:'银行卡'},
  ]
export default {
  components: {
    Slshop,
  },
  name: "activeContent",
  data() {
       const validateStartTime = (rule, value, callback) => {
      if (!value){
       callback(new Error('请填写开始时间'))
      }else{
        let formFather = this.formFather;
        if (formFather.endTime && new Date(value).getTime() > new Date(formFather.endTime).getTime()) {
          callback(new Error('开始时间不能大于结束时间'));
        } else {
          callback()
        }
      }
    };
    const validateEndTime = (rule, value, callback) => {
      if (!value){
       callback(new Error('请填写结束时间'))
      }else{
        let formFather = this.formFather;
        if (formFather.startTime && new Date(value).getTime() < new Date(formFather.startTime).getTime()) {
          callback(new Error('结束时间不能小于开始时间'));
        } else {
          callback()
        }
      }
    };
           const validateOffStartTime = (rule, value, callback) => {
      if (!value){
       callback(new Error('请填写开始时间'))
      }else{
        let formFather = this.formFather;
        if (formFather.writeOffEndTime && new Date(value).getTime() > new Date(formFather.writeOffEndTime).getTime()) {
          callback(new Error('开始时间不能大于结束时间'));
        } else {
          callback()
        }
      }
    };
    const validateOffEndTime = (rule, value, callback) => {
      if (!value){
       callback(new Error('请填写结束时间'))
      }else{
        let formFather = this.formFather;
        if (formFather.writeOffStartTime && new Date(value).getTime() < new Date(formFather.writeOffStartTime).getTime()) {
          callback(new Error('结束时间不能小于开始时间'));
        } else {
          callback()
        }
      }
    };
    return {
      maxnum:0,
      fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
      preview:false,//控制点击查看时候的父级弹框
      jjrImagesType:[],//经纪人-字典中所存的数据
      zfImagesType:[],//找房-字典中所存的数据
      mshImagesType:[],//慢生活-字典中所存的数据
      checkboxArr: ["认证经纪人", "非认证经纪人"],
      // 总条数
      total: 0,
      // 遮罩层
      loading: true,
      title: "", //标题
      haspic: false, // 默认没有传图片,
      appType: "", //用户类型
      promotionVO: {
        promotionSubList: [
          {
            imageUrl: "",
            locationType: "start",
            redirectUrl: "",
            shareImageUrl: "",
            shareTitle: "",
          },
          {
            imageUrl: "",
            locationType: "end",
            redirectUrl: "",
            shareImageUrl: "",
            shareTitle: "",
          },
        ],
        promotionContentList: [
          {
            content: "",
            title: "",
          },
          {
            content: "",
            title: "",
          },
        ],
      },
      rules: {
        appType: [
          { required: true, message: "请选择app类型", trigger: "change" },
        ],
        comId: [{ required: true, message: "请选择城市", trigger: "change" }],
        comCodeList: [{type: "array",required: true,message: "至少选择一个适用范围",trigger: "change"}],
        startTime: [{ required: true, validator: validateStartTime ,trigger: "change" }],
        endTime: [{ required: true, validator: validateEndTime ,trigger: "change" }],  
        writeOffStartTime: [{ required: true, validator: validateOffStartTime ,trigger: "change" }],
        writeOffEndTime: [{ required: true, validator: validateOffEndTime ,trigger: "change" }],  
      },
      //查询参数
      queryParams: {
        page: 1,
        pageSize: 10,
        comCode: undefined,
        agentId: undefined,
        startTime: undefined,
        endTime: undefined,
        writeOffStartTime: undefined,
        writeOffEndTime: undefined,
        startType: undefined,
        appType: undefined,
        sortType: "descending",
        comId: undefined,
      },

      //搜索列表
      getActivitiesDetails: [],
      //父级-弹框（新增活动）
      formFather: {
        appType: undefined,//应用类型
        comId: undefined,//城市
        promotionName: undefined,//活动名称

        startTime: undefined,//活动开始时间
        endTime: undefined,//活动结束时间
                          
        comCodeList:undefined,//是否认证经纪人

        writeOffStartTime: undefined,//活动-核销-开始-时间
        writeOffEndTime: undefined,//活动-核销-结束-时间

        pageName: undefined,//活动分享标题

        imageUrl:undefined,//图片Url
        imageOrigin:undefined,//图片来源
        locationType:undefined,//图片类型-字典里面的值

        imageUrl:undefined,//图片链接
        // startType: undefined,
        // agentId: undefined,
        // comCode: undefined,
        id: undefined,  //修改数据-用
      },
      form: {
        imageUrl: "",
        picType: null,
        // description :"",
      },
      //是否显示弹框
      openFather: false,
      open: false,
      openDetail: false,
      activitiesTypeOptions: [],
      appTypeOptions: [],
      citysOptions: [],
      aId: undefined,
      // fileList: [],
      cardFileList: [],
      startFileList: [],
      endFileList: [],
      stipulationList1: [],
      stipulationList2: [],
      dialogImageUrl: undefined,
      dialogVisible: false,
      imageUrls: undefined,
      promotionSubList: [],
      // 图片类型
      picTypes: [
        { name: "首页弹框图片", value: "dialog" },
        { name: "活动按钮图片", value: "button" },
        { name: "活动详情图片", value: "detail" },
        { name: "分享活动图片", value: "shareImg" },
      ],

      editEnable: true,
    };
  },
  filters: {},
  created() {
    this.getactivitiesType();
    this.getappType();
    this.getCitysDict();
    this.getList();
    this.getActivityImg();//经纪人-获取字典中图片信息
    this.getActivityImgZhaoFang();//找房-获取字典中图片信息
    this.getActivityImgDianShang()//电商-获取字典中图片信息
  },
  mounted() {
  // document.addEventListener("click",  this.cancels);
 },
  methods: {
    
  // 获取==经纪人==活动==类型
  getActivityImg() {
        this.getDicts("jjr_image_type").then((response) => {
          // 对应上面方法二
          response.data.forEach(item=>{
            item.fileList = []
            item.url = ''
            item.type = 'jjr_image_type'
          })
        // this.list = response.data
        var a = response.data
        this.jjrImagesType.push(...a)
      });
      },
  // 获取==找房==活动==类型
  
  getActivityImgZhaoFang() {
        this.getDicts("zf_image_type").then((response) => {
          // 对应上面方法二
          response.data.forEach(item=>{
            item.fileList = []
            item.url = ''
            item.type = 'zf_image_type'
          })
        // let list = 
        let b = []
        b = response.data
         this.jjrImagesType.push(...b)
        // this.jjrImagesType.push(...this.list,...response.data)
        // this.jjrImagesType = this.list.concat(a)
      });
      },
  // 获取==找房==活动==类型
  getActivityImgDianShang() {
        this.getDicts("msh_image_type").then((response) => {
          // 对应上面方法二
          response.data.forEach(item=>{
            item.fileList = []
            item.url = ''
          })
        this.mshImagesType = response.data
      });
      },
  // 用户端活动上传图片成功
  userClientUploadSuccess(index,res, file, picType,nameDetail) {
      console.log(nameDetail,"dddeeeeedd",index)
      if (file.response.length > 0) {
        this.$message({
          type: "info",
          message: "图片上传成功",
          duration: 3000,
        });
        let imgUrl ="https://api.shulanfd.com/aist-filesvr-web/api/files/" +file.response[0].id;
       

        switch (picType) {
          case "jjr":
            if(nameDetail == '详情图片'){
              //方法一：
              // this.$set(this.jjrImagesType[index], 'url', imgUrl)
              //方法二fileList
               this.jjrImagesType[index].url = imgUrl
               this.jjrImagesType[index].fileList.push({
                 url:imgUrl
               })
            }else if(nameDetail == '弹窗图片'){
               this.jjrImagesType[index].url = imgUrl
              this.jjrImagesType[index].fileList.push({
                 url:imgUrl
               })
            }else if(nameDetail == '按钮图片'){
               this.jjrImagesType[index].url = imgUrl
               this.jjrImagesType[index].fileList.push({
                 url:imgUrl
               })
            } else if(nameDetail == '分享卡片'){
               this.jjrImagesType[index].url = imgUrl
               this.jjrImagesType[index].fileList.push({
                 url:imgUrl
               })
            }else if(nameDetail == '分享中间图'){
                
               this.jjrImagesType[index].url = imgUrl
               this.jjrImagesType[index].fileList.push({
                 url:imgUrl
               })
            }else if(nameDetail == '活动开始图片'){
             
               this.jjrImagesType[index].url = imgUrl
               this.jjrImagesType[index].fileList.push({
                 url:imgUrl
               })
            }else if(nameDetail == '活动结束图片'){
            
               this.jjrImagesType[index].url = imgUrl
               this.jjrImagesType[index].fileList.push({
                 url:imgUrl
               })
            }          
            break;
            case "msh":            
            if(nameDetail == '活动详情图片'){
             
               this.mshImagesType[index].url = imgUrl
               this.mshImagesType[index].fileList.push({
                 url:imgUrl
               })
            }else if(nameDetail == '弹窗图片'){
              
               this.mshImagesType[index].url = imgUrl
               this.mshImagesType[index].fileList.push({
                 url:imgUrl
               })
            }else if(nameDetail == '活动按钮图片'){
                
               this.mshImagesType[index].url = imgUrl
               this.mshImagesType[index].fileList.push({
                 url:imgUrl
               })
            }else if(nameDetail == '分享活动图片'){
                
               this.mshImagesType[index].url = imgUrl
               this.mshImagesType[index].fileList.push({
                 url:imgUrl
               })
            } else if(nameDetail == '活动弹窗按钮'){
               
               this.mshImagesType[index].url = imgUrl
               this.mshImagesType[index].fileList.push({
                 url:imgUrl
               })
            }  else if(nameDetail == '分享活动卡片'){
               
               this.mshImagesType[index].url = imgUrl
               this.mshImagesType[index].fileList.push({
                 url:imgUrl
               })
            }       
            break;
       
        }
      } else {
        this.$message({
          type: "error",
          message: "图片上传失败",
          duration: 3000,
        });
      }
      },
  //添加
  handleAdd() {
      this.initPromotionVO()
      this.openFather = true;
      this.preview = false;
      this.title = "添加活动内容";
      // this.formFather = {comCodeList: ['认证经纪人'],appType:undefined};
      this.formFather = {
        appType: undefined,//应用类型
        comId: undefined,//城市
        promotionName: undefined,//活动名称

        startTime: undefined,//活动开始时间
        endTime: undefined,//活动结束时间
                          
        comCodeList: ['认证经纪人'],//是否认证经纪人

        writeOffStartTime: undefined,//活动-核销-开始-时间
        writeOffEndTime: undefined,//活动-核销-结束-时间

        pageName: undefined,//活动分享标题

        imageUrl:undefined,//图片Url
        imageOrigin:undefined,//图片来源
        locationType:undefined,//图片类型-字典里面的值

        imageUrl:undefined,//图片链接
 
        id: undefined,  //修改数据-用
      }
    },



  //移除图片（经纪人）
  handleRemove(file, fileList) {
      this.jjrImagesType.forEach(item=>{
        if(item.url===file.url){
          item.fileList = []
          console.log(item.url===file.url,"pppp",item)
          item.url= ''
          item.fileList = []
        }
      })

      this.$message({
        type: "info",
        message: "已删除原有图片",
        duration: 1000,
      });
      this.haspic = false;
    
      },
 
  // 移除（慢生活）
  handleRemoveMsh(file){
      this.mshImagesType.forEach(item=>{
              if(item.url===file.url){
                item.fileList = []
                console.log(item.url===file.url,"pppp",item)
                item.url= ''
                item.fileList = []
              }
            
            })
      this.$message({
              type: "info",
              message: "已删除原有图片",
              duration: 1000,
            });
      this.haspic = false;
     },

  //删除按钮
  handleDelete(row) {
      this.$confirm("是否确认删除数据?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return deleteActivities(row.id);
        })
        .then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        
        })
        .catch(function () {});
    },
  //修改按钮
  handleUpdate(row,index) {
      this.initPromotionVO()
      this.preview = false;
      console.log(row,"9090")
        this.openFather = true;
        this.title = "修改活动内容";
        this.formFather.appType=row.appType;//应用类型
        this.formFather.comId=row.comId;//城市
        this.formFather.promotionName=row.promotionName;//活动名称

        this.formFather.startTime=row.startTime;//活动开始时间
        this.formFather.endTime=row.endTime;//活动结束时间
       
        this.formFather.writeOffStartTime=row.writeOffStartTime;//活动-核销-开始-时间
        this.formFather.writeOffEndTime=row.writeOffEndTime;//活动-核销-结束-时间

        this.formFather.pageName = row.pageName;//活动分享标题

        this.formFather.comCodeList=row.comCodeList;//是否认证经纪人
        this.formFather.id = row.id
       
        // 显示已经上传的图片
        if(row.appType == 'jjr'){
        this.jjrImagesType.forEach((v,i)=>{
          this.jjrImagesType[i].fileList = []  
          row.promotionSubList.forEach(item=>{  
             if(v.dictType == item.imageOrigin && v.dictLabel == item.locationType ){
              //  console.log(i,"真假",v.dictType == item.imageOrigin &&v.dictLabel == item.locationType)       
              // this.$set(this.jjrImagesType[i].fileList,'url',item.imageUrl) 
              this.jjrImagesType[i].url = item.imageUrl
              this.jjrImagesType[i].fileList = []            
              this.jjrImagesType[i].fileList.push({url:item.imageUrl}) 
             }
          }) 
        })
        }else if(row.appType == 'msh'){
          this.mshImagesType.forEach((v,i)=>{
          this.mshImagesType[i].fileList = []  
          row.promotionSubList.forEach(item=>{  
             if(v.dictType == item.imageOrigin && v.dictLabel == item.locationType ){
              //  console.log(i,"真假",v.dictType == item.imageOrigin &&v.dictLabel == item.locationType)       
              // this.$set(this.mshImagesType[i].fileList,'url',item.imageUrl) 
              this.mshImagesType[i].url = item.imageUrl
              this.mshImagesType[i].fileList = []            
              this.mshImagesType[i].fileList.push({url:item.imageUrl}) 
             }
          }) 
        })
        }

       



    },
  //查看
  handleCheck(row) {
        this.initPromotionVO()
        this.openFather = true;
        this.title = "预览活动内容";
        this.preview = true;
        this.formFather.appType=row.appType;//应用类型
        this.formFather.comId=row.comId;//城市
        this.formFather.promotionName=row.promotionName;//活动名称

        this.formFather.startTime=row.startTime;//活动开始时间
        this.formFather.endTime=row.endTime;//活动结束时间
       
        this.formFather.writeOffStartTime=row.writeOffStartTime;//活动-核销-开始-时间
        this.formFather.writeOffEndTime=row.writeOffEndTime;//活动-核销-结束-时间

        this.formFather.pageName = row.pageName;//活动分享标题

        this.formFather.comCodeList=row.comCodeList;//是否认证经纪人
        this.formFather.id = row.id
       
        // 显示已经上传的图片
        if(row.appType == 'jjr'){
        this.jjrImagesType.forEach((v,i)=>{
          this.jjrImagesType[i].fileList = []  
          row.promotionSubList.forEach(item=>{  
             if(v.dictType == item.imageOrigin && v.dictLabel == item.locationType ){
              //  console.log(i,"真假",v.dictType == item.imageOrigin &&v.dictLabel == item.locationType)       
              // this.$set(this.jjrImagesType[i].fileList,'url',item.imageUrl) 
              this.jjrImagesType[i].url = item.imageUrl
              this.jjrImagesType[i].fileList = []            
              this.jjrImagesType[i].fileList.push({url:item.imageUrl}) 
             }
          }) 
        })
        }else if(row.appType == 'msh'){
          this.mshImagesType.forEach((v,i)=>{
          this.mshImagesType[i].fileList = []  
          row.promotionSubList.forEach(item=>{  
             if(v.dictType == item.imageOrigin && v.dictLabel == item.locationType ){
              //  console.log(i,"真假",v.dictType == item.imageOrigin &&v.dictLabel == item.locationType)       
              // this.$set(this.mshImagesType[i].fileList,'url',item.imageUrl) 
              this.mshImagesType[i].url = item.imageUrl
              this.mshImagesType[i].fileList = []            
              this.mshImagesType[i].fileList.push({url:item.imageUrl}) 
             }
          }) 
        })
        }
     
        
    },
  //确定按钮===>提交新增弹出框的数据
  submitFormFather() {
      // 第一行
      let appType = this.formFather.appType;//应用类型
      let comId = this.formFather.comId;//城市
      let promotionName = this.formFather.promotionName;//活动名称
      // 第二行
      let startTime = this.formFather.startTime;//活动开始时间
      let endTime = this.formFather.endTime;//活动结束时间
  
      //第五行
      let comCodeList = this.formFather.comCodeList;//是否认证经纪人
      //第六行
      let writeOffStartTime = this.formFather.writeOffStartTime;//核销-开始时间
      let writeOffEndTime = this.formFather.writeOffEndTime;//核销-结束时间
      // 第七行
      let pageName = this.formFather.pageName;// 活动分享标题

      //图片
      let promotionSubList = []
      //经纪人的图片存放

      let jjrImagesType = this.jjrImagesType.filter(item => {
        if(item.url){
          return item
        }
      })
      console.log("url",jjrImagesType)
      if(jjrImagesType.length>0){
          jjrImagesType.forEach(item=>{
        let imgObj = {
          imageOrigin:'',
          imageUrl :'',
          locationType:''
          }
          imgObj.imageOrigin = item.dictType
          imgObj.locationType = item.dictLabel
          imgObj.imageUrl = item.url
          promotionSubList.push(imgObj)
      })
      }
       
      let mshImagesType = this.mshImagesType.filter(item => {
        if(item.url){
          return item
        }
      })
      if(mshImagesType.length>0){
          mshImagesType.forEach(item=>{
        let imgObj = {
          imageOrigin:'',
          imageUrl :'',
          locationType:''
          }
          imgObj.imageOrigin = item.dictType
          imgObj.locationType = item.dictLabel
          imgObj.imageUrl = item.url
          promotionSubList.push(imgObj)
      })
      }

    // console.log("这里是图片",promotionSubList)
   
      // let comCode = this.formFather.comCode;
      // let agentId = this.formFather.agentId;
      // let startType = this.formFather.startType;
      let id = "";
      if (this.formFather.id != undefined) {
        id = this.formFather.id;
      }
      let data = {
        appType: appType,//应用类型
        comId: comId,//城市id
        promotionName: promotionName,//活动名称

        startTime: startTime,//开始时间
        endTime: endTime,//结束时间

        promotionSubList: promotionSubList,
        
        comCodeList:comCodeList,//是否认证经纪人

        writeOffStartTime: writeOffStartTime,//核销-开始-时间
        writeOffEndTime: writeOffEndTime,//核销-结束-时间

        pageName: pageName,//活动分享标题
        id:id
      };
      this.$refs["formFather"].validate((valid) => {
        if (valid) {
          // console.log(this.formFather.id,"0000")
          if (this.formFather.id != undefined) {
            addActivities(JSON.stringify(data)).then((response) => {
              if (response.data == 1) {
                this.$message("修改成功");
                this.cancels();
                this.reset();
              } else if (response.data == -1) {
                this.$message("活动发起类型或者app类型不能重复添加");
              }
            });
          } else {
            addActivities(JSON.stringify(data)).then((response) => {
              if (response.data == 1) {
                this.$message("添加成功");
                this.cancels();
                this.reset();
              } else if (response.data == -1) {
                this.$message("活动发起类型或者app类型不能重复添加");
              }
            });
          }

        }
      });
    },
  // 初始化活动内容
  initPromotionVO() {
        this.reset();
        this.formFather = {
        appType: undefined,//应用类型
        comId: undefined,//城市
        promotionName: undefined,//活动名称

        startTime: undefined,//活动开始时间
        endTime: undefined,//活动结束时间
                          
        comCodeList: ['认证经纪人'],//是否认证经纪人

        writeOffStartTime: undefined,//活动-核销-开始-时间
        writeOffEndTime: undefined,//活动-核销-结束-时间

        pageName: undefined,//活动分享标题

        imageUrl:undefined,//图片Url
        imageOrigin:undefined,//图片来源
        locationType:undefined,//图片类型-字典里面的值

        imageUrl:undefined,//图片链接
 
        id: undefined,  //修改数据-用
      }

       
        this.jjrImagesType.forEach((v,i)=>{
          this.jjrImagesType[i].fileList= []
          v.url = ''
        })
        this.mshImagesType.forEach(v=>{
           v.url = ''
          v.fileList=[]
        })

    },


















    getSelectPayCodeResult(e,obj) {
      this.form.picType = obj.dictValue;
    },
    //排序
    changeTableSort(column) {
      //获取字段名称和排序类型
      var fieldName = column.prop;
      var sortingType = column.order;
      if (fieldName == "createTime") {
        if (sortingType == "descending") {
          this.queryParams.sortType = "descending";
        } else {
          this.queryParams.sortType = null;
        }
        this.getList();
      }
    },
    //活动类型
    getactivitiesType() {
      this.getDicts("activity_Initiated").then((response) => {
        this.activitiesTypeOptions = response.data;
      });
    },
    getappType() {
      this.getDicts("app_type").then((response) => {
        this.appTypeOptions = response.data;
      });
    },
    // 获取城市字典
    getCitysDict() {
      this.getDicts("sys_user_city").then((response) => {
        this.citysOptions = response.data;
      });
    },
    //查询
    getList() {
      this.loading = true;
      listActivities(this.queryParams).then((response) => {
        this.getActivitiesDetails = response.data.list;
        this.total = response.data.total;
        this.loading = false;
      });
    },
    //搜索
    handleQuery() {
      this.queryParams.page = 1;
      this.getList();
    },
    //重置
    resetQuery() {
      this.queryParams.page = 1;
      this.resetForm("queryForm");
      this.getList();
    },
  
    
    //取消
    cancels() {
      this.openFather = false;
      this.reset();
    },
    statusFormat(row, column) {
      return this.selectDictLabel(this.activitiesTypeOptions, row.startType);
    },
    userFormat(row, column) {
      return this.selectDictLabel(this.appTypeOptions, row.appType);
    },
  // 表单重置
  reset() {
      this.queryParams.page = 1;
      this.getList();
      this.resetForm("form");
    },
  addchange(fielList){
    
    if(fielList.length>0){
     this.maxnum = 1
     
     
    }else if(fielList.length>1){
        fielList.pop()
    }
      
  },
 




    handleAdds(row) {
      // 初始化活动内容对象
      this.initPromotionVO();
      this.open = true;
      this.title = "添加活动内容";
      this.aId = row.id;
      this.appType = row.appType;
      this.form = {};
      this.imageUrls = undefined;
      this.form.imageUrlss = undefined;
      this.haspic = false;
    },
    closeDialog() {
      this.open = false;
      // this.fileList = [];
      this.initPromotionVO();
    },
    //上传的文件个数超出设定时触发的函数
    onExceed(fileList) {
      console.log(fileList,"0000======",)
      // if(fileList.length>1){
         this.$message({
        type: "info",
        message: "最多只能上传一个图片",
        duration: 6000,
      });
      // }
     
    },
    beforeAvatarUpload(file) {
      // 文件类型进行判断
      const isJPG = /^image\/(jpeg|png|jpg)$/.test(file.type);
      if (!isJPG) {
        this.$message.error("上传图片只能是 image/jpeg/png 格式!");
      }
      return isJPG;
    },
    //查看图片
    handlePictureCardPreview(file) {
      console.log("99999",file)
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    
    //上传成功返回
    handleSuccess(res, file) {
      if (file.response.length > 0) {
        this.$refs.form.validateField("imageUrl");
        this.$message({
          type: "info",
          message: "图片上传成功",
          duration: 3000,
        });
        this.$refs["uploadpic"].clearValidate();
        this.haspic = true;
        this.imageUrls =
          "https://api.shulanfd.com/aist-filesvr-web/api/files/" +
          file.response[0].id;
      } else {
        this.$message({
          type: "error",
          message: "图片上传失败",
          duration: 3000,
        });
        this.haspic = false;
        this.imageUrls = "";
      }
    },

   

    // 提交活动内容
    submitForm() {
      if (this.appType == "zhaofang") {
        this.submitUserActivity();
      } else if (this.appType == "jjr" || this.appType == "msh") {
        this.submitJjrActivity();
      }
    },

    // 提交用户端活动内容
    submitUserActivity() {
      let params = this.promotionVO;
      params.promotionSubList[1].redirectUrl =
        params.promotionSubList[0].redirectUrl;
      params.promotionSubList[1].shareTitle =
        params.promotionSubList[0].shareTitle;
      params.promotionSubList[1].shareImageUrl =
        params.promotionSubList[0].shareImageUrl;

      if (
        params.promotionSubList[0].promotionId == null ||
        params.promotionSubList[0].promotionId.length == 0
      ) {
        // 新增活动内容
        params.promotionSubList[0].promotionId = this.aId;
        params.promotionSubList[1].promotionId = this.aId;
        params.promotionContentList[0].promotionId = this.aId;
        params.promotionContentList[1].promotionId = this.aId;
      }

      console.log("用户端活动提交参数 --->", params);
      editUserActivities(params).then((res) => {
        console.log("新增活动内容结果 --->", res);
        if (res.code === 200) {
          this.$message({
            type: "info",
            message: "添加成功",
            duration: 3000,
          });
          this.initPromotionVO()
          this.getList();
          this.closeDialog();
        }
      });
    },

    // 提交经纪人活动内容
    submitJjrActivity() {
      let imageUrl = "";
      if (this.imageUrls != undefined) {
        imageUrl = this.imageUrls;
      } else {
        imageUrl = this.form.imageUrlss;
      }
      let promotionId = this.aId;
      let id = "";
      if (this.form.subId != undefined) {
        id = this.form.subId;
      }
      let data = {
        imageUrl: imageUrl,
        promotionId: promotionId,
        id: id,
        locationType: this.form.picType,
        // description: this.form.description,
      };
      if (this.haspic) {
        if (this.form.subId != undefined) {
          addItemActivities(JSON.stringify(data)).then((response) => {
            if (response.data == 1) {
              this.$message("修改成功");
              this.cancel();
              this.reset();
            }
          });
        } else {
          addItemActivities(JSON.stringify(data)).then((response) => {
            if (response.data == 1) {
              this.$message("添加成功");
              this.cancel();
              this.reset();
            }
          });
        }
      } else {
        this.$refs["form"].validate((valid) => {
          if (valid) {
            if (this.form.subId != undefined) {
              addItemActivities(JSON.stringify(data)).then((response) => {
                if (response.data == 1) {
                  this.$message("修改成功");
                  this.cancel();
                  this.reset();
                }
              });
            } else {
              addItemActivities(JSON.stringify(data)).then((response) => {
                if (response.data == 1) {
                  this.$message("添加成功");
                  this.cancel();
                  this.reset();
                }
              });
            }
          }
        });
      }
    },

    // 活动内容界面点击编辑按钮
    onEditActivityClick() {
      this.editEnable = true;
    },

    // 删除树懒用户端活动信息
    onDeleteActivityClick() {
      this.$confirm("确定删除该活动吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        deletetUserActivities({ promotionId: this.aId }).then((res) => {
          console.log("删除活动内容结果 --->", res);
          this.closeDialog();
          this.$message("删除成功");
          this.getList();
        });
      });
    },

    // 取消按钮
    cancel() {
      this.closeDialog();
      this.openDetail = false;
      this.reset();
    },
    handleDeletes(row) {
      this.$confirm("是否确认删除数据?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return deleteItemActivities(row.id);
        })
        .then(() => {
          this.getList();
          this.msgSuccess("删除成功");
          this.cancel();
        })
        .catch(function () {});
    },
    // 判断表格是否有子项，无子项不显示展开按钮
    getRowClass(row, rowIndex) {
      if (row.row.promotionSubList.length === 0) {
        return "row-expand-cover";
      }
    },
    //修改按钮
    handleUpdates(row) {
      this.form = {
        imageUrl: undefined,
        subId: undefined,
        imageUrlss: undefined,
        // description:undefined,
      };
      // this.fileList = [];
      let imageUrls = {};
      if (row.imageUrl != null && row.imageUrl != undefined) {
        imageUrls = {
          url: row.imageUrl,
        };
        // this.fileList.push(imageUrls);
        this.haspic = true;
      }
      this.open = true;
      this.title = "修改活动内容";
      this.form.imageUrlss = row.imageUrl;
      // this.form.description = row.description;
      this.form.subId = row.id;
      this.aId = row.promotionId;
      this.form.picType = row.locationType;
    },
    
    close() {
      this.promotionSubList = [];
      this.openDetail = false;
    },

   

  },
  filters:{
      payTypeFilter(type){
        var typePic = typeobj.find(item=>{
          return item.dictValue===type
        })
         return  typePic ? typePic.dictLabel : null
      }
  }
};
</script>

<style scoped lang="scss">
.el-table .row-expand-cover .cell .el-table__expand-icon {
  display: none;
}
 .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    border: 1px dashed #d9d9d9;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  /* 上传图片的 uploader--大小 */
  /* .el-upload--picture-card {
    background-color: #fbfdff;
    border: 1px dashed #c0ccda;
    border-radius: 6px;
    box-sizing: border-box;
    width: 110px!important;
    height: 110px!important;
    cursor: pointer;
    line-height: 110px!important;
    vertical-align: top;
} */
.avatar-uploader-icon[data-v-4c2540fa] {
    font-size: 22px;
    color: #8c939d;
    width: 146px;
    height: 146px;
    border: 1px dashed #d9d9d9;
    line-height: 146px;
    text-align: center;
}

.avatar[data-v-4c2540fa] {
    width: 146px  !important;
    height: 146px !important;
    display: block;
}
 ::v-deep .mydisabled > .el-upload--picture-card {
  display: none !important;
}
.el-icon-delete:before {
    content: " ";
}
//  .items .el-form-item__label{
//   font-size: 14px  !important;
//   color: red;
// }
.el-dialog__body .el-form .el-row{
  display: flex;
  flex-wrap: wrap;
}
</style>
